<template>
  <div>
    <x-header :left-options="{backText: ''}" style="background-color:#31b9b8;">报到预登记<a slot="right" style="color: #fff">提交</a>
    </x-header>
    <group>
      <x-input title="联系方式" name="mobile" placeholder="请填写" keyboard="number" is-type="china-mobile"></x-input>
      <datetime title="预计到校时间" placeholder="请选择"></datetime>
      <popup-picker title="到校交通方式" :data="list" placeholder="请选择"></popup-picker>
    </group>
    <group title="随行人员（1）">
      <x-input title="亲友名称" name="qy_name" placeholder="请填写" is-type="china-name"></x-input>
      <x-input title="亲友关系" name="qy_relative" placeholder="请填写" is-type="china-name"></x-input>
      <x-input title="联系方式" name="qy_tel" placeholder="请填写" keyboard="number" is-type="china-mobile"></x-input>
    </group>
    <group title="随行人员（1）">
      <x-input title="亲友名称" name="qy_name" placeholder="请填写" is-type="china-name"></x-input>
      <x-input title="亲友关系" name="qy_relative" placeholder="请填写" is-type="china-name"></x-input>
      <x-input title="联系方式" name="qy_tel" placeholder="请填写" keyboard="number" is-type="china-mobile"></x-input>
    </group>
    <div style="padding:15px 100px;">
      <x-button type="primary" plain>增加随行人员</x-button>
    </div>
  </div>
</template>
<script>
  import {XHeader, XInput, Group, XButton, Cell, PopupPicker, Datetime} from 'vux'

  export default {
    components: {
      XHeader,
      XInput,
      XButton,
      Group,
      Cell,
      PopupPicker,
      Datetime
    },
    data () {
      return {
        demo01: '',
        list: [['亲有自驾', '自乘', '校迎新车辆']]
      }
    }
  }
</script>
